<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.box:after{
				content: "";
				clear: both;
				display: block;
			}
			span{
				display: block;
				height: 50px;
				width: 100px;
				text-align: center;
				line-height: 50px;
				color: white;
				font-size: 30px;
				background:goldenrod;
				float: left;
			};
			ul{
				position: relative;
			}
			ul li{
				position: absolute;
				left: 0;
				top: 50px;
				width: 300px;
				height: 200px;
				background: lightblue;
				text-align: center;
			}
			.con{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span>模块一</span>
			<span>模块二</span>
			<span>模块三</span>
		</div>
		
		<ul>
			<li class="con_x">
				<p>内容一</p>
				<p>内容一</p>
				<p>内容一</p>
				<p>内容一</p>
			</li>
			<li class="con">
				<p>内容二</p>
				<p>内容二</p>
				<p>内容二</p>
				<p>内容二</p>
			</li>
			<li class="con">
				<p>内容三</p>
				<p>内容三</p>
				<p>内容三</p>
				<p>内容三</p>
			</li>
		</ul>
	</body>
	<script>
		window.onload=function(){
			function Tab(){
				this.aSp=document.querySelectorAll("span");
				this.aLi=document.querySelectorAll("li");
				var _this=this;
				for(var i=0;i<this.aSp.length;i++){
					this.aSp[i].index = i;
					this.aSp[i].onclick=function(){
						_this.change(this.index);
					};
				}
			}
			Tab.prototype.change=function(index){
				for(var j=0;j<this.aLi.length;j++){
					if(j!=index){
						this.aLi[j].className="con";
					}else{
						this.aLi[j].className="con_x";
					}
				}
			}
			var tab1=new Tab("box")
		}
	</script>
</html>